import QtQuick 2.3
import "qrc:///content"
import "qrc:///Constants.js" as Constants

Rectangle
{
    // Identifier of the item
    id: registered

    // common properties

    anchors.fill: parent
    color: Constants.backgroundColor

    // Testing purpose (Design)
    width: 300
    height: 500

    FontLoader { id: titleFont; source: "qrc:///font/Ubuntu-Title.ttf" }
    // FontLoader { id: titleBoldFont; source: "qrc:///font/Ubuntu-Titling-Bold.ttf" }

    // caption
    Caption
    {
        id: caption
        label: "Whandgo"
    }

    // logo image
    Image
    {
        id: logoImage
        width: 60
        height: 60
        anchors.top: caption.bottom
        anchors.topMargin: 10
        source: "qrc:///images/logo.png"
        anchors.horizontalCenter: parent.horizontalCenter
    }

    // title
    Text
    {
        id: titleLabel
        text: "whandgo"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: logoImage.bottom
        anchors.topMargin: -20
        color: Constants.titleBackgroundColor
        font.pointSize: Constants.titleFontSize - 10
        font.family: titleFont.name
    }

    // description
    Text
    {
        id: enjoyLabel
        text: "just enjoy"
        anchors.top: titleLabel.bottom
        anchors.topMargin: -10
        anchors.horizontalCenter: parent.horizontalCenter
        color: Constants.titleBackgroundColor
        font.pointSize: Constants.buttonFontSize + 5
        font.family: titleFont.name
    }

    TextInput2
    {
        id: textInputUser
        focus: true
        anchors.top: enjoyLabel.bottom
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Username"
    }

    TextInput2
    {
        id: textInputPassword
        anchors.top: textInputUser.bottom
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Password"
        echoMode: TextInput.Password
    }

    // Login button
    Button
    {
        id: loginButton
        anchors.top: textInputPassword.bottom
        anchors.topMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        label: "Login"
        onClicked: registered.loginClicked()
    }

    // sign up for facebook
    Button
    {
        id: signFacebookButton
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 70
        label: "Sign Up for Facebook"
        labelSize: Constants.buttonFontSize - 2
        labelColor: Constants.buttonBackgroundColor
        buttonColor: Constants.backgroundColor
        onHoverColor: Constants.backgroundColor
        borderColor: Constants.backgroundColor
        onClicked: Qt.quit()
    }

    Button
    {
        id: helpButton
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 40
        label: "Help Center"
        labelSize: Constants.buttonFontSize - 2
        labelColor: Constants.buttonBackgroundColor
        buttonColor: Constants.backgroundColor
        onHoverColor: Constants.backgroundColor
        borderColor: Constants.backgroundColor
        onClicked: Qt.quit()
    }

    // signals
    signal loginClicked()
    onLoginClicked: { console.log("Login") }

    // functions
    function showView(show)
    {
        textInputUser.value = ""
        textInputPassword.value = ""

        registered.state = show? "" : "hide"
        loginButton.disabled = !show
        signFacebookButton.disabled = !show
        helpButton.disabled = !show
    }

    // states
    states:
    [
    State
    {
        name: "hide"
        PropertyChanges
        {
            target: registered
            opacity: 0.0
        }
    }
    ]

    // transitions
    transitions: Transition
    {
        NumberAnimation
        {
            properties: "opacity"
            duration: 500
        }
    }
}
